import { _decorator, Node, UITransform, Vec2, Vec3, EventTouch, UIOpacity, tween } from 'cc';
import { BaseUI } from '../base/base-ui';
const { ccclass, property } = _decorator;

/**
 * 面板基类
 * 所有面板都应该继承此类
 */
@ccclass('BasePanel')
export class BasePanel extends BaseUI {
    /** 是否可拖动 */
    @property
    protected draggable: boolean = false;

    /** 是否启用显示/隐藏动画 */
    @property
    protected enableAnimation: boolean = true;

    /** 动画时长（秒） */
    @property
    protected animationDuration: number = 0.3;

    /** 是否正在拖动 */
    private isDragging: boolean = false;

    /** 拖动起始位置 */
    private dragStartPos: Vec2 = new Vec2();

    /** 面板起始位置 */
    private panelStartPos: Vec3 = new Vec3();

    /** 透明度组件 */
    private uiOpacity: UIOpacity | null = null;

    /**
     * 生命周期：加载时
     */
    protected override onLoad(): void {
        super.onLoad();
        this.componentName = 'BasePanel';

        // 确保有UIOpacity组件
        this.uiOpacity = this.getComponent(UIOpacity);
        if (!this.uiOpacity) {
            this.uiOpacity = this.addComponent(UIOpacity);
        }

        // 初始化拖动功能
        if (this.draggable) {
            this.initializeDrag();
        }
    }

    /**
     * 初始化拖动功能
     */
    protected initializeDrag(): void {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }

    /**
     * 触摸开始回调
     */
    protected onTouchStart(event: EventTouch): void {
        if (!this.draggable) return;
        
        this.isDragging = true;
        this.dragStartPos = event.getUILocation();
        this.panelStartPos.set(this.node.position);
    }

    /**
     * 触摸移动回调
     */
    protected onTouchMove(event: EventTouch): void {
        if (!this.isDragging) return;

        const currentPos = event.getUILocation();
        const delta = currentPos.subtract(this.dragStartPos);
        
        const newPos = new Vec3(
            this.panelStartPos.x + delta.x,
            this.panelStartPos.y + delta.y,
            this.panelStartPos.z
        );
        
        this.node.position = newPos;
    }

    /**
     * 触摸结束回调
     */
    protected onTouchEnd(): void {
        this.isDragging = false;
    }

    /**
     * 显示面板
     */
    public override show(): void {
        this.node.active = true;
        if (this.enableAnimation && this.uiOpacity) {
            // 从透明到不透明的动画
            this.uiOpacity.opacity = 0;
            tween(this.uiOpacity)
                .to(this.animationDuration, { opacity: 255 })
                .start();
        }
        this.logger.debug(`[${this.componentName}] Panel shown`);
    }

    /**
     * 隐藏面板
     */
    public override hide(): void {
        if (this.enableAnimation && this.uiOpacity) {
            // 从不透明到透明的动画
            tween(this.uiOpacity)
                .to(this.animationDuration, { opacity: 0 })
                .call(() => {
                    this.node.active = false;
                })
                .start();
        } else {
            this.node.active = false;
        }
        this.logger.debug(`[${this.componentName}] Panel hidden`);
    }

    /**
     * 设置面板是否可拖动
     */
    public setDraggable(draggable: boolean): void {
        this.draggable = draggable;
        if (draggable && !this.isDragging) {
            this.initializeDrag();
        }
    }

    /**
     * 生命周期：销毁时
     */
    protected override onDestroy(): void {
        // 移除事件监听
        if (this.draggable) {
            this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
            this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
            this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
            this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
        }
        super.onDestroy();
    }
} 